<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  .check-space {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e5e5e5;
  }

  .checkbox {
    display: flex;
    align-items: center;
    padding: 20px 0;
    margin-left: 20px;
  }

  .checkbox span {
    font-size: 14px;
    margin-right: 20px;
  }

  .current-question-icon {
    width: 16px;
    height: 16px;
    background-color: #0c83ff;
    border-radius: 4px;
    margin-right: 5px;
    border: 1px solid #cccccc;
  }

  .has-answer-icon {
    width: 16px;
    height: 16px;
    background-color: deepskyblue;
    border-radius: 4px;
    margin-right: 5px;
    border: 1px solid #cccccc;
  }

  .no-answer-icon {
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 4px;
    margin-right: 5px;
    border: 1px solid #cccccc;
  }

  h4 {
    margin-left: 15px;
  }

  .question-choice-content {
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .choice-item {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
    cursor: pointer;
    border: 1px solid #cccccc;
  }

  .has-answer-question {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #00bfff;
    cursor: pointer;
    border: 1px solid #cccccc;
  }

  #current-question {
    background-color: #0c83ff
  }
</style>
<div class="check-space">
  <div class="checkbox">
    <div class="current-question-icon"></div>
    <span>当前题目</span>
    <div class="has-answer-icon"></div>
    <span>已作答</span>
    <div class="no-answer-icon"></div>
    <span>未作答</span>
  </div>
</div>

<div class="single-question">
  <h4>一、单选题 （60分）</h4>
  <div class="question-choice-content">
    <div class="choice-item">1</div>
    <div class="choice-item">2</div>
    <div class="choice-item">3</div>
    <div class="choice-item">4</div>
    <div class="choice-item">5</div>
    <div class="choice-item">6</div>
  </div>

  <div class="judge-question">
    <h4>二、判断题 （40分）</h4>
    <div class="question-choice-content">
      <div class="choice-item">7</div>
      <div class="choice-item">8</div>
    </div>
  </div>

  <div class="multiple-question">
    <h4>三、多选题 （40分）</h4>
    <div class="question-choice-content">
      <div class="choice-item">9</div>
      <div class="choice-item">10</div>
    </div>
  </div>
</div>

<script>
  const choiceItems = document.querySelectorAll('.choice-item')
  const questionCards = document.querySelectorAll('.question-card')
  for (let i = 0; i < choiceItems.length; i++) {
    choiceItems[i].onclick = function () {
      for (let i = 0; i < choiceItems.length; i++) {
        choiceItems[i].id = ''
        if (rightHaveAnswered(i)) {
          choiceItems[i].classList.add('has-answer-question')
        }
      }
      this.id = 'current-question'
      const index = this.getAttribute('index')
      for (let i = 0; i < questionCards.length; i++) {
        questionCards[i].style.display = 'none'
      }
      questionCards[index].style.display = 'block'
    }
  }

  function rightHaveAnswered(index) {
    const questionCards = document.querySelectorAll('.question-card')
    const questionCard = questionCards[index]
    if (questionCard) {
      return questionCard.getAttribute('have-answer') === 'true'
    } else {
      return false
    }
  }
</script>